<template>
	<view class="content">
		<view class="user-information row mb20">
			<image :src="logo" class="avatar"></image>
			<view class="meta_content">
				<text class="name" v-html="name"></text>
				<text class="time" v-html="time"></text>
			</view>
		</view>
		<u-parse class="article-info-content mb20" :html="content"></u-parse>
		
		<image :src="v.url" style="width: 100%;margin-bottom: 10rpx;border-radius: 10rpx;" mode="widthFix" v-for="(v,k) in cover_images"></image>
		<view class="comment-title bold mt10 mb20" style="display: block;">评论列表</view>
		<view style="text-align: center;padding: 20px 0;color: rgba(0,0,0,.5);font-weight: bold;" v-if="commentList.length <= 0">
			暂无评论
		</view>
		<view class="comment" v-for="(res, index) in commentList" :key="res.id">
			<view class="left"><image :src="res.avatar" mode="aspectFill"></image></view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.nickname }}</view>
					<view class="like" :class="{ highlight: res.isLike }">
						<view class="num" v-if="res.like_count >= 1">{{ res.like_count }}</view>
						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(res.id,index,true)"></u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(res.id,index,false)"></u-icon>
					</view>
				</view>
				<view class="comment-content">{{ res.content }}</view>
				<view class="bottom">
					{{ res.create_time }}
					<text class="reply" v-if="res.is_my_comment" @click="delCommentFun(res.id)">删除</text>
				</view>
			</view>
		</view>
		<view class="h10vh" v-if="commentList.length >= 1"></view>
		<view style="position: fixed;bottom: 0;left: 0;right: 0;border-top: 2rpx solid #f6f6f6;" class="bg-white">
			<view class="row-between mr20">
				<u-search search-icon="none" v-model="keyword" :clearabled="false" placeholder="请输入评论"></u-search>
				<u-button class="common-button" :hair-line="false" @click="sendCommentFun">发表</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		info,
		commentLists,
		sendComment,
		delComment,
		likeComment
	} from '@/api/circleOfFriends';
	export default {
		data() {
			return {
				keyword:'',
				id:0,
				logo:'',
				content:'',
				time:'',
				name:'',
				cover_images:{},
				commentList: [],
				page:1,
				limit:10
			};
		},
		async onLoad(options) {
			var _this = this;
			_this.id = options.id;
			info({
				id:options.id,
				touristId:uni.getStorageSync('tourist_id')
			}).then(res => {
				if(res.code == 1){
					_this.logo = res.data.logo;
					_this.title = res.data.title;
					_this.content = res.data.content;
					_this.time = res.data.create_time;
					_this.name = res.data.name;
					_this.cover_images = res.data.cover_images;
					uni.setNavigationBarTitle({
					    title: res.data.title
					});
				}
			})
			this.getComment();
		},
		methods:{
			// 点赞
			getLike(id,index,status) {
				var _this = this;
				likeComment({
					id:id,
					status:status
				}).then(res =>{
					if(res.code == 1){
						_this.commentList[index].isLike = status;
						if (status) {
							_this.commentList[index].like_count++;
						} else {
							_this.commentList[index].like_count--;
						}
					}
				})
			},
			sendCommentFun(){
				var _this = this;
				if(_this.keyword.length <= 0){
					_this.$refs.uToast.show({
						title: '请输入评论内容',
						type: 'error'
					})
				}
				sendComment({
					advertising_id : _this.id,
					content : _this.keyword
				}).then(res =>{
					if(res.code == 1){
						_this.keyword = '';
						_this.$refs.uToast.show({
							title: '发布评论成功',
							type: 'success',
							url: '/pages/bundle/article_info_details/article_info_details?id=' + _this.id
						})
					}
				})
			},
			delCommentFun(id){
				var _this = this;
				delComment({
					id : id
				}).then(res =>{
					if(res.code == 1){
						_this.$refs.uToast.show({
							title: '删除成功',
							type: 'success',
							url: '/pages/bundle/article_info_details/article_info_details?id=' + _this.id
						})
					}
				})
			},
			// 评论列表
			getComment() {
				commentLists({
					advertising_id : this.id,
					page : this.page,
					limit : this.limit
				}).then(res =>{
					this.commentList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body{
		height: 100%;
	}
	.h10vh{
		display: block;
		height: 10vh;
	}
	.content{
		background-color: #fff;
		padding: calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
		.user-information{
			.avatar{
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					overflow: hidden;
				}
				.meta_content{
					// margin-bottom: 44rpx;
					line-height: 50rpx;
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					.name,.time{
						display: inline-block;
						vertical-align: middle;
						// margin: 0 10px 10px 0;
						font-size: 15px;
					}
					.name{
						color: rgb(29, 176, 252);
						font-weight: bold;
					}
					.time{
						color: rgba(0,0,0,0.3);
					}
				}
				
				.article-info-content{
					
				}
			}
		}
	.comment {
		display: flex;
		padding: 30rpx 0;
		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}
		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				.name {
					color: #5677fc;
				}
				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;
					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}
				.highlight {
					color: #5677fc;
					.num {
						color: #5677fc;
					}
				}
			}
			.comment-content {
				margin-bottom: 10rpx;
			}
			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;
				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;
					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}
				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;
					.more {
						margin-left: 6rpx;
					}
				}
			}
			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;
				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
	.common-button{
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 100rpx;
	}
</style>
